<template>
    <sui-overlay v-model="visible" :style="{zIndex:zIndex}">
        <div class="sui-popup" :class="'sui-popup--'+position" :style="{zIndex:zIndex+1}">
            <slot></slot>
        </div>
    </sui-overlay>
</template>

<script>
  let zIndex=300;
  export default {
    props:{
      position:{
        type:String,
        default:'center'
      },
      visible:{
        type:Boolean,
        default:true
      },
      overlay:{
        type:Boolean,
        default:true
      }
    },
    model: {
      prop: 'visible',
    },
    data(){
      return {
        zIndex:zIndex
      }
    },
    created(){
      zIndex=zIndex+10
    },
    methods:{
      close(){
        this.visible=false
      }
    }
  }

</script>

<style type="text/css" lang="less" scoped>

.sui-popup{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
</style>
